<html>    
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="../gmap3.js"></script>
    <style>
      .gmap3{
        margin: 20px auto;
        border: 1px dashed #C0C0C0;
        width: 800px;
        height: 800px;
      }
      .infow{
        width:250px;
        height:150px;
      }
    </style>
  <body>
    <div id="test1" class="gmap3"></div>
    
    <script type="text/javascript">
    
      // http://blog.mridey.com/2010/11/how-to-embed-streetview-in-infowindow.html
      
      function Panorama(){
        var p,  marker, infowindow, map;
        
        this.setMap = function(obj){
          map = obj;
        };
        
        this.setMarker = function(obj){
          marker = obj;
        };
        
        this.setInfowindow = function(obj){
          infowindow = obj;
        };
        
        this.open = function(){
          infowindow.open(map, marker);
        };
        
        this.run = function(id){
          if (!marker) {
            return;
          }
          p = new google.maps.StreetViewPanorama(
            document.getElementById(id), 
            { navigationControl: true,
              navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
              enableCloseButton: false,
              addressControl: false,
              linksControl: false
            }
          );
          p.bindTo("position", marker);
          p.setVisible(true);
        };
      }
    
      $(function(){
        
        var points = [
          [-33.88917576169259,151.2442638310547],
          [-33.854398887065486,151.1563732060547],
          [-33.90541911630287,151.0846187504883]
        ],
        map;
        
        $('#test1').gmap3({
          map:{
            options:{
              zoom: 12,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              streetViewControl: false,
              center: points[0]
            },
            callback: function(aMap){
              map = aMap;
            }
          }
        });
            
        
        $.each(points, function(i, point){
          
          var panorama = new Panorama();
          panorama.setMap(map);
        
          $("#test1").gmap3({
            marker:{
              latLng: point,
              options:{title: "Click to open", draggable: true},
              callback: function(marker){
                panorama.setMarker(marker);
              },
              events:{
                click: function(){
                  panorama.open();
                }
              }
            },
            infowindow:{
              options:{
                content: "<div id='iw"+i+"' class='infow'></div>"
              },
              callback: function(infowindow){
                panorama.setInfowindow(infowindow);
              },
              events:{
                domready: function(){
                  panorama.run("iw"+i);
                }
              }
            }
          });
          
        });
          
      });
    </script>
  </body>
</html>